<div class="po-tabs-container">
  <div #containerTabs class="po-tabs-header">
    <div class="po-tabs-button-wrapper" role="tablist">
      @for (tab of tabs; track trackByFn($index, tab)) {
        <po-tab-button
          #tabButton
          class="po-tab-button"
          [class.po-tab-button-aa]="size === 'small'"
          [p-active]="tab.active"
          [p-disabled]="tab.disabled"
          [p-hide]="tab.hide"
          [p-id]="tab.id"
          [hidden]="tab.hide"
          [attr.disabled]="tab.disabled"
          [p-label]="tab.label"
          [id]="tab.id"
          (keyup.enter)="closeListbox()"
          (p-activated)="onTabActive(tab)"
          (p-change-state)="onTabChangeState(tab)"
          (p-click)="selectedTab(tab)"
        >
        </po-tab-button>
      }

      @if (isShowTabDropdown) {
        <po-tab-dropdown
          #tabDropdown
          class="po-tab-dropdown"
          [class.po-tab-dropdown-device]="!tabsDefault?.length"
          [p-label]="literals.moreTabs"
          [p-size]="size"
          [p-tabs]="overflowedTabs"
          (p-change-state)="onTabChangeState($event)"
          (p-click)="onTabActiveByDropdown($event)"
        >
        </po-tab-dropdown>
      }
    </div>
  </div>
</div>
<div class="po-tabs-content">
  <ng-content></ng-content>
</div>
